<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js精彩图片瀑布流布局</title>
<meta name="description" content="js精彩图片瀑布流布局，制作列表图片单列竖直布局。适用与图片和文字的瀑布流布局。" />
</head>

<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a{color:#5e5e5e;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* picList */
#picList{width:1007px;overflow:hidden;zoom:1;position:relative;margin:20px auto;}
#picList li{padding-bottom:15px;width:240px;border-bottom:none;display:block;position:absolute;}
#picList img{width:220px;display:block;padding:10px 9px 0;border:1px solid #e2e2e2;border-bottom:none;}
#picList .subtool{height:26px;padding:10px 10px 0;text-align:left;border:1px solid #e2e2e2;border-top:none;}
</style>

<ul id="picList">
	<li id="listItem1">
		<a target="_blank" href="http://www.jsfoot.com/"><img src="images/83484025.jpg" width="220" height="255" alt="回顾章子怡红毯之路" /></a>
		<p class="subtool"><a target="_blank" href="http://www.jsfoot.com/">回顾章子怡红毯之路</a></p>
	</li>
	<li id="listItem2">
		<a target="_blank" href="http://www.jsfoot.com/"><img src="images/83483224.jpg" width="220" height="150" alt="“小杨幂”黎丹丰胸后人气大涨"  /></a>
		<p class="subtool"><a target="_blank" href="http://www.jsfoot.com/">“小杨幂”黎丹丰胸后人气大涨</a></p>
	</li>
	<li id="listItem3">
		<a target="_blank" href="http://www.jsfoot.com/"><img src="images/83474168.jpg" alt="《忠烈杨家将》人物海报曝光" width="220" height="309" border="0" /></a>
		<p class="subtool"><a target="_blank" href="http://www.jsfoot.com/">《忠烈杨家将》人物海报曝光</a></p>
	</li>
	<li id="listItem4">
		<a target="_blank" href="http://www.jsfoot.com/"><img src="images/83474172.jpg" alt="贾樟柯谢飞畅谈青年导演" width="220" height="150" border="0" /></a>
		<p class="subtool"><a target="_blank" href="http://www.jsfoot.com/">贾樟柯谢飞畅谈青年导演</a></p>
	</li>
	<li id="listItem5">
		<a target="_blank" href="http://www.jsfoot.com/"><img src="images/83483410.jpg" width="220" height="289" alt="黄晓明带伤登封面称够MAN" /></a>
		<p class="subtool"><a target="_blank" href="http://www.jsfoot.com/">黄晓明带伤登封面称够MAN</a></p>
	</li>
	<li id="listItem6">
		<a target="_blank" href="http://www.jsfoot.com/"><img src="images/83502333.jpg" width="220" height="255" alt="张亮、小李琳饮交杯酒" /></a>
		<p class="subtool"><a target="_blank" href="3">张亮、小李琳饮交杯酒</a></p>
	</li>
	<li id="listItem7">
		<a target="_blank" href="http://www.jsfoot.com/"><img src="images/83483284.jpg" width="220" height="150" alt="郭晶晶与霍启刚现身颁奖礼 " /></a>
		<p class="subtool"><a target="_blank" href="http://www.jsfoot.com/">郭晶晶与霍启刚现身颁奖礼</a></p>
	</li>
	<li id="listItem8">
		<a target="_blank" href="http://www.jsfoot.com/"><img src="images/83484025.jpg" width="220" height="255" alt="回顾章子怡红毯之路" /></a>
		<p class="subtool"><a target="_blank" href="http://www.jsfoot.com/">回顾章子怡红毯之路</a></p>
	</li>
	<li id="listItem9">
		<a target="_blank" href="http://www.jsfoot.com/"><img src="images/83483224.jpg" width="220" height="150" alt="“小杨幂”黎丹丰胸后人气大涨"  /></a>
		<p class="subtool"><a target="_blank" href="http://www.jsfoot.com/">“小杨幂”黎丹丰胸后人气大涨</a></p>
	</li>
	<li id="listItem10">
		<a target="_blank" href="http://www.jsfoot.com/"><img src="images/83474168.jpg" alt="《忠烈杨家将》人物海报曝光" width="220" height="309" border="0" /></a>
		<p class="subtool"><a target="_blank" href="http://www.jsfoot.com/">《忠烈杨家将》人物海报曝光</a></p>
	</li>
	<li id="listItem11">
		<a target="_blank" href="http://www.jsfoot.com/"><img src="images/83474172.jpg" alt="贾樟柯谢飞畅谈青年导演" width="220" height="150" border="0" /></a>
		<p class="subtool"><a target="_blank" href="http://www.jsfoot.com/">贾樟柯谢飞畅谈青年导演</a></p>
	</li>
	<li id="listItem12">
		<a target="_blank" href="http://www.jsfoot.com/"><img src="images/83483410.jpg" width="220" height="289" alt="黄晓明带伤登封面称够MAN" /></a>
		<p class="subtool"><a target="_blank" href="http://www.jsfoot.com/">黄晓明带伤登封面称够MAN</a></p>
	</li>
	<li id="listItem13">
		<a target="_blank" href="http://www.jsfoot.com/"><img src="images/83502333.jpg" width="220" height="255" alt="张亮、小李琳饮交杯酒" /></a>
		<p class="subtool"><a target="_blank" href="3">张亮、小李琳饮交杯酒</a></p>
	</li>
	<li id="listItem14">
		<a target="_blank" href="http://www.jsfoot.com/"><img src="images/83483284.jpg" width="220" height="150" alt="郭晶晶与霍启刚现身颁奖礼 " /></a>
		<p class="subtool"><a target="_blank" href="http://www.jsfoot.com/">郭晶晶与霍启刚现身颁奖礼</a></p>
	</li>
</ul>


<script type="text/javascript">
//精彩图片瀑布流布局
function G(s){
	return document.getElementById(s);
}
var c1 = c2 = c3 = c4 = min = max = h = 0, 
	w = 253, 
	picList = G("picList"), 
	html = "", 
	css,
	obj,
	len;

function setList(startNum,entNum){
	len = picList.getElementsByTagName("li").length;
	for(var i = startNum; i < entNum; i++){
		obj = G("listItem"+(i+1));
		min = Math.min(c1, c2, c3, c4);
		css = obj.style;
		css.top = min + "px";
		h = obj.offsetHeight;
		if(c1 == min){
			css.left = 0;
			c1 += h;
		}else if(c2 == min){
			css.left = w + "px";
			c2 += h;
		}else if(c3 == min){
			css.left = w * 2 + "px";
			c3 += h;
		}else if(c4 == min){
			css.left = w * 3+ "px";
			c4 += h;
		}
		css.visibility = "visible";
	}
	max = Math.max(c1, c2, c3, c4);
	picList.style.height = max + "px";
}

setList(0,14);//设置瀑布图片显示数量14
</script>

</body>
</html>